<script type="text/javascript" src="/public/express_templet/history/history.js"></script>
<script type="text/javascript" src="/public/express_templet/print_express.js"></script>
<script type="text/javascript" src="/public/express_templet/swfobject.js"></script>
<link rel="stylesheet" type="text/css" href="/public/express_templet/history/history.css" />
<style type='text/css'>
    .operaFlash{text-align:left;margin:5px 0px 7px 15px}
    .operaFlash button{margin-right:15px}
    .operaFlash div{margin-top:5px}
    #flashBox{width:900px;height:500px;margin:10px 10px 10px 10px;border:1px solid gray;}
</style>
<script type="text/javascript">
    var swfVersionStr = "10.0.0";
    var xiSwfUrlStr = "/public/express_templet/playerProductInstall.swf";
    var flashvars = {};
    var params = {};
    params.quality = "high";
    params.bgcolor = "#ffffff";
    params.allowscriptaccess = "sameDomain";
    params.allowfullscreen = "true";
    params.wmode = "Opaque";
    var attributes = {};
    attributes.id = "printExpress";
    attributes.name = "printExpress";
    attributes.align = "left";

    swfobject.embedSWF(
            "/public/express_templet/main.swf", "flashContent",
            "100%", "100%",
            swfVersionStr, xiSwfUrlStr,
            flashvars, params, attributes);

    swfobject.createCSS("#flashContent", "display:block;text-align:left;");
</script>

<div class='operaFlash'>
    <div>
        名称：<input type='text' name='express_name' class='small' value='<{$item.name}>' />
        宽度：<input type='text' id='app_width' onchange="resize();" class='tiny' name='width' value='<{$item.width|default:900}>' />
        高度：<input type='text' id='app_height' onchange="resize();" class='tiny' name='height' value='<{$item.height|default:500}>' />
        添加背景图<input type="file" name="logo_pic" id="logo_pic" onchange="upload_file(this);" style="width: 60px;">
        <button type='button' class='btn' onclick="save();"><span>保存</span></button>
    </div>

    <div>
        <select onchange='addPrint(this)' id='addElementCon' class='auto'></select>
        <button type='button' class='btn' onclick="printObj.delTextarea();"><span>移除元素</span></button>

        字号：
        <select id='fontSize_options' onchange="printObj.editStyle({fontSize:this.value});" class='auto'>
            <option value='8'>8px</option>
            <option value='10'>10px</option>
            <option value='12' selected=selected>12px</option>
            <option value='15'>15px</option>
            <option value='20'>20px</option>
        </select>

        文字位置：
        <select id='textAlign_options' onchange="printObj.editStyle({textAlign:this.value});" class='auto'>
            <option value='left' selected=selected>居左</option>
            <option value='center'>居中</option>
            <option value='right'>居右</option>
        </select>

        字体：
        <select id='fontFamily_options' onchange="printObj.editStyle({fontFamily:this.value});" class='auto'>
            <option selected=selected value='宋体'>宋体</option>
            <option value='隶书'>隶书</option>
            <option value='黑体'>黑体</option>
        </select>

        字间距：
        <select id='trackingLeft_options' onchange="printObj.editStyle({trackingLeft:this.value});" class='auto'>
            <option value='-5'>-5</option>
            <option value='-2'>-2</option>
            <option value='0' selected=selected>0</option>
            <option value='2'>2</option>
            <option value='5'>5</option>
            <option value='9'>9</option>
            <option value='12'>12</option>
            <option value='15'>15</option>
            <option value='20'>20</option>
        </select>

        <input type='hidden' id='fontWeight_options' value='normal' />
        <input type='hidden' id='fontStyle_options' value='normal' />
        <label class='attr'><input type='checkbox' id='fontWeight_checkbox' value='bold' onclick="editFont(this,'fontWeight');" />加粗</label> &nbsp;&nbsp;
        <label class='attr'><input type='checkbox' id='fontStyle_checkbox' value='italic' onclick="editFont(this,'fontStyle');" />斜体</label>
    </div>
</div>

<input type='hidden' value='<{$item.id}>' name='id' />
<!--兼容IE flash居左对齐-->
<div style="text-align:left;overflow:auto;height:500px">
    <div id='flashBox'>
        <div id='flashContent'></div>
    </div>
</div>
<script type="text/javascript" src="/public/js/jquery.js"></script>
<script type="text/javascript" src="/public/js/layer/layer.js"></script>
<script type="text/javascript" src="/public/H-ui/js/H-ui.js"></script>
<script type="text/javascript" src="/public/H-ui/js/H-ui.admin.js"></script>
<{ajax_upload()}>
<script type='text/javascript'>

    printObj = null;

    //保存快递单
    function save()
    {
        //拼接用户自定义的post数据
        var postData          = {};
        postData.express_name = $('[name="express_name"]').val();
        postData.id           = $('[name="id"]').val();
        postData.width        = $('[name="width"]').val();
        postData.height       = $('[name="height"]').val();

        //调用flex发送接口
        printObj.saveExpress('<{site_url('/manager/order/express_templet/save')}>',postData);
    }

    //初始化
    function init()
    {
        printObj = new printExpress();
        printObj.setModeByJS('edit');

        var elementObj = new Array(<{if $item.config!=''}><{join(',',unserialize($item.config))}><{/if}>);
        for(elementPro in elementObj)
        {
            printObj.createTextarea(elementObj[elementPro]);
        }

        var backgroundPic = "<{$item.background}>";

        if(backgroundPic != '')
        {
            printObj.backgroundPic(backgroundPic);
        }

        resize();
    }

    //字体样式更新【针对粗体，斜体】
    function editFont(obj,styleType)
    {
        var setVal = (obj.checked == true) ? obj.value : 'normal';
        $('#'+styleType+'_options').val(setVal);

        switch(styleType)
        {
            case "fontWeight":
                printObj.editStyle({fontWeight:setVal});
                break;

            case "fontStyle":
                printObj.editStyle({fontStyle:setVal});
                break;
        }
    }

    //字体样式还原复选框【针对粗体，斜体】
    function editFontRestore(styleType)
    {
        var is_checked = ($('#'+styleType+'_options').val() == 'normal') ? false : true;
        $('#'+styleType+'_checkbox').attr('checked',is_checked);
    }

    //根据宽高值自动改变大小
    function resize()
    {
        var w = $('#app_width').val();
        var h = $('#app_height').val();

        printObj.flashObj.width  = w;
        printObj.flashObj.height = h;

        $('#flashBox').css('width' ,w);
        $('#flashBox').css('height',h);

        printObj.setAppRange(w,h);
    }

    //添加元素
    function addPrint(obj)
    {
        var styleSheet = {};
        styleSheet.fontStyle    = $('#fontStyle_options').val();
        styleSheet.fontFamily   = $('#fontFamily_options').val();
        styleSheet.fontWeight   = $('#fontWeight_options').val();
        styleSheet.fontSize     = $('#fontSize_options').val();
        styleSheet.textAlign    = $('#textAlign_options').val();
        styleSheet.trackingLeft = $('#trackingLeft_options').val();

        if(obj.value)
        {
            printObj.createTextarea({typeId:obj.value,typeText:obj.options[obj.selectedIndex].text,styleSheet:styleSheet});
        }
    }

    //重置style按钮
    function resetTextareaStyle(styleObj)
    {
        for(pro in styleObj[0])
        {
            $('#'+pro+'_options').val(styleObj[0][pro]);
        }

        //根据值影响checkbox的效果【针对粗体，斜体】
        editFontRestore('fontWeight');
        editFontRestore('fontStyle');
    }

    //保存后回调函数
    function saveCallback(result)
    {
        if($.trim(result) == 'success')
        {
            layer.msg('保存成功');
            setTimeout(function(){
                layer_close();
            },1000)
        }
        else
        {
            layer.msg(result);
        }
    }

    //背景图片上传回调
    function show_upload(spec_pic, url){
        printObj.backgroundPic(url);
    }

    //页面加载完毕后执行的任务
    jQuery(function(){
        var elementDataObj = {
            <{$data_config}>
    }
        var selectStr = "<option value=''>添加元素</option>";
        for(e in elementDataObj)
        {
            selectStr += "<option value='"+e+"'>"+elementDataObj[e]+"</option>";
        }
        $('#addElementCon').html(selectStr);
    });
</script>